<template>
  <el-sub-menu
    v-if="menuItem.children && menuItem.children.length"
    :index="menuItem.id"
  >
    <template #title> {{ menuItem.label }} </template>
    <MenuTree
      v-for="(child, index) in menuItem.children"
      :key="child.id"
      :menuItem="child"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="menuItem.url">
    {{ menuItem.label }}
  </el-menu-item>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  menuItem: Object,
});
</script>
